import React, { useMemo, useState } from "react";
import "./index.css";
import { SubmitBar } from 'react-vant';
const initSeatData = Array.from({ length: 50 }, (_, index) => {
  return {
    id: `D${index + 1}`,
    status:
      index === 0 || index === 1 || index === 48 || index === 49
        ? "selected"
        : index % 3 === 0
        ? "booked"
        : "avaibled",
  };
});

function Index() {
  const [seatList, setSeatList] = useState(initSeatData);
  const price = 140;

  const handleToClickSeat = (id) => {
    setSeatList((pre) => {
      return pre.map((item) => {
        if (item.id === id && item.status !== "booked") {
          return {
            ...item,
            status: item.status === "avaibled" ? "selected" : "avaibled",
          };
        }
        return item;
      });
    });
  };

  const getSelectSeat=useMemo(()=>{
    return seatList.filter((item)=>item.status==="selected")
  },[seatList])
  return (
    <div>
      <div className="seat_wrap">
        {seatList.map((item, ind) => (
          <div
            key={ind}
            className={`seatitem seatitem-${item.status}`}
            onClick={() => handleToClickSeat(item.id)}
          >
            {item.status === "selected" && <b>{item.id}</b>}
          </div>
        ))}
      </div>


      <div className="logoTitle">
        <div className="logoTitle-item">
          <span className="item-dot dot-avaibled"></span> 可选{price}￥
        </div>
        <div className="logoTitle-item">
          <span className="item-dot dot-selected"></span> 可选{price}￥
        </div>
        <div className="logoTitle-item">
          <span className="item-dot dot-booked"></span> 可选{price}￥
        </div>
      </div>

      <div className="Select-Seat">
        <div>已选： {getSelectSeat.length}座</div>
        <div className="Select-Seat-prop">
          {getSelectSeat.map((item)=>item.id).join("、")}
        </div>
      </div>

      {/* <SubmitBar price={getSelectSeat.length*price} buttonText="提交订单" /> */}


    </div>
  );
}

export default Index;
